/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="select-datasource__container">
        <div class="select-datasource__title">
            <lang>选择要建立连接的数据库类型：</lang>
        </div>
        <div class="select-datasource__list">
            <div v-for="(item,index) in sourceList" 
                 :key="index"
                 class="select-datasource__item"
                 :class="[{'active':activeIndex === index},item.imgSrc]"
                 @click="_selectDataSource(item,index)">
                {{ item.name }}
            </div>
        </div>
    </div>
</template>
<script lang="ts">

interface FormData{
    imgSrc: string;
    value: string;
}

import { Component, Vue } from 'vue-property-decorator';

@Component
export default class SelectDatasource extends Vue {
    sourceList = [ {
        value:'es',
        imgSrc:'es',
        name:'Elastic Search'
    }, {
        value:'nebula',
        imgSrc:'graph',
        name:'NebulaGraph'
    }]

    // sourceList = [ {
    //     value:'es',
    //     imgSrc:'es',
    //     name:'Elastic Search'
    // }, {
    //     value:'mongdb',
    //     imgSrc:'mongdb',
    //     name:'MongoDB'
    // }, {
    //     value:'nebula',
    //     imgSrc:'graph',
    //     name:'NebulaGraph'
    // }]
    soureceValue = 'es'
    activeIndex = 0

    _selectDataSource (item: FormData, index: number) {
        this.soureceValue = item.value;
        this.activeIndex = index;
    }
    getJsonValue () {
        return { soureceValue: this.soureceValue};
    }
};
</script>
<style lang="less" scoped>
    .select-datasource__container{
        padding: 10px 20px;
        .select-datasource__list{
            display: flex;
            flex-direction:column;
            margin: 20px 0;
        }
        .select-datasource__item{
            cursor: pointer;
            margin-right: 15px;
            display: flex;
            align-items: center;
            padding-left: 30px;
            font-size: 14px;
            color: #14161A;
            font-weight: bold;
            margin-bottom: 10px;
            width: 576px;
            height: 64px;
            border:1px solid #ddd;
            border-radius: 5px;
            // background: url(../../img/ElasticSearch_normal.png) no-repeat;
            // background-size:100% 100%;
            &.active{
                width: 590px;
                height: 78px;
                border: 1px solid #204ed9;
                // background: url(../../img/ElasticSearch_active.png) no-repeat;
                // background-size:100% 100%;
            }
            // &.es{
            //     width: 576px;
            //     height: 64px;
            //     // background: url(../../img/ElasticSearch_normal.png) no-repeat;
            //     // background-size:100% 100%;
            //     &.active{
            //         width: 590px;
            //          height: 78px;
            //         // background: url(../../img/ElasticSearch_active.png) no-repeat;
            //         // background-size:100% 100%;
            //     }
            // }
            // &.mongdb{
            //     width: 576px;
            //      height: 64px;
            //     // background: url(../../img/MongoDB_normal.png) no-repeat;
            //     // background-size:100% 100%;
            //     &.active{
            //         width: 590px;
            //         height: 78px;
            //         // background: url(../../img/MongoDB_active.png) no-repeat;
            //         // background-size:100% 100%;
            //     }
            // }
            // &.graph{
            //     width: 576px;
            //      height: 64px;
            //     // background: url(../../img/MongoDB_normal.png) no-repeat;
            //     // background-size:100% 100%;
            //     &.active{
            //         width: 590px;
            //         height: 78px;
            //         // background: url(../../img/MongoDB_active.png) no-repeat;
            //         // background-size:100% 100%;
            //     }
            // }
        }
    }
</style>
      